<template>
  <div class="box">
    <div class="card-content">
      <el-tabs
        :tab-position="tabPosition"
        v-model="tabIndex"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(item, index) in tabs"
          :key="index"
          :label="item.label"
          :name="item.name"
          :v-if="item.isShow"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div
      class="scroll-content"
      @scroll="onScroll"
      :style="'overflow-y: auto;height:' + contentStyleObj.height"
    >
      <div
        v-for="(item, index) in tabs"
        :key="index"
        :label="item.label"
        :ref="tabs.id"
        :name="item.name"
        class="scroll-item"
      >
        <div class="scroll-header">
          <span class="title">{{ item.value }}</span>
        </div>

        <el-row>
          <el-col :span="4" v-for="(item, index) in list" :key="index">
            <div class="list-item">
              <div class="item-top">
                <span class="item-num">{{ item.num }}</span>
                <span class="item-type">{{ item.type }}</span>
                <span class="item-count">{{ item.conut }}</span>
              </div>
              <div class="item-text">{{ item.text }}</div>
              <div class="item-manager">{{ item.manger }}</div>
              <div class="item-line"></div>
              <div class="item-tag">
                <span class="tag-rig bg"></span>
                <span class="tag-rig">{{ item.tag[0] }}</span>
                <span class="tag-rig">{{ item.tag[1] }}</span>
                <span>{{ item.tag[2] ? item.tag[2] : "" }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: "left",
      reload: true,
      contentStyleObj: {
        // height: "320px",
      },
      tabs: [
        {
          isShow: true,
          label: "通用",
          value: "T.通用",
          name: "1",
          id: "1",
        },
        {
          isShow: true,
          label: "联合体",
          value: "L.联合体",
          name: "2",
          id: "2",
        },
        {
          isShow: true,
          label: "分包",
          value: "F.分包",
          name: "3",
          id: "3",
        },
        {
          isShow: true,
          label: "用印",
          value: "Y.用印",
          name: "4",
          id: "4",
        },
        {
          isShow: true,
          label: "费用",
          value: "F.费用",
          name: "5",
          id: "5",
        },
        {
          isShow: true,
          label: "请示",
          value: "Q.请示",
          name: "6",
          id: "6",
        },
        {
          isShow: true,
          label: "报销",
          value: "B.报销",
          name: "7",
          id: "7",
        },
      ],
      list: [
        {
          num: "HT001",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT002",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT003",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT004",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003", "HT004"],
        },
        {
          num: "HT005",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT006",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT007",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003"],
        },
        {
          num: "HT008",
          type: "TK-10-42",
          conut: 1,
          text: "层更改项目管理阶段",
          manager: "合同管理员",
          tag: ["HT002", "HT003", "HT004"],
        },
      ],
      tabIndex: "1",
    };
  },
  methods: {
    refresh() {
      this.reload = false;
      this.$nextTick(() => (this.reload = true));
    },
    handleClick(index, info) {
      console.log("index    " + index.index);
      let target = document.querySelector(".scroll-content");
      let scrollItems = document.querySelectorAll(".scroll-item");
      console.log(target);
      console.log(target.scrollHeight, target.scrollTop, target.clientHeight);
      console.log(
        target.scrollHeight <= target.scrollTop + target.clientHeight
      );
      if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
        this.tabIndex = index.name;
        console.log(this.tabIndex);
      }

      let totalY =
        scrollItems[index.index].offsetTop - scrollItems[0].offsetTop;
      let distance = document.querySelector(".scroll-content").scrollTop;
      let step = totalY / 50;
      if (totalY > distance) {
        smoothDown(document.querySelector(".scroll-content"));
      } else {
        let newTotal = distance - totalY;
        step = newTotal / 50;
        smoothUp(document.querySelector(".scroll-content"));
      }

      function smoothDown(element) {
        if (distance < totalY) {
          distance += step;
          element.scrollTop = distance;
          setTimeout(smoothDown.bind(this, element), 10);
        } else {
          element.scrollTop = totalY;
        }
      }

      function smoothUp(element) {
        if (distance > totalY) {
          distance -= step;
          element.scrollTop = distance;
          setTimeout(smoothUp.bind(this, element), 10);
        } else {
          element.scrollTop = totalY;
        }
      }
    },
    // 滚动条滚动
    onScroll(e) {
      console.log(e);
      let scrollItems = document.querySelectorAll(".scroll-item");
      console.log("scrollItems.length " + scrollItems.length);
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop - 320;
        if (judge) {
          this.tabIndex = i.toString();
          console.log("123456789 " + i);
          break;
        }
      }
    },
    getHight() {
      this.contentStyleObj.height = window.innerHeight - 320 + "px";
      // this.contentStyleObj.height = window.innerHeight+"px";
      console.log(
        "this.contentStyleObj.height  " + this.contentStyleObj.height
      );
    },
  },
  created() {
    this.getHight();
    window.addEventListener("resize", this.getHight);
  },
  destroyed() {
    window.removeEventListener("resize", this.getHight);
  },
};
</script>
<style  lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;

  .card-content {
    width: 120px;
  }
  .scroll-content {
    //   padding-bottom: 320px;
    flex: 1;
    .scroll-item {
      border-bottom: 1px dashed #979797;
      padding-bottom: 20px;
      .scroll-header {
        .title {
          height: 30px;
          line-height: 2;
          margin-top: 20px;
          color: #28528d;
          text-decoration: underline;
          display: inline-block;
        }
      }

      .list-item {
        width: 93%;
        background: #ffffff;
        border: 1px solid #28528d;
        border-radius: 5px;
        padding: 0 15px;
        margin: 15px 0 0 0;
        display: inline-block;
        .item-top {
          display: flex;
          align-items: center;
          margin-top: 15px;
          .item-num {
            font-size: 9px;
          }
          .item-type {
            font-size: 9px;
            flex: 1;
            margin-left: 10px;
          }
          .item-count {
            width: 30px;
            height: 30px;
            font-size: 12px;
            border: 2px solid #ccc;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
          }
        }
        .item-text {
          font-size: 6px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #252525;
          margin: 10px 0;
        }
        .item-manager {
          font-size: 4px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #696969;
          margin: 10px 0;
        }
        .item-line {
          border-bottom: 1px dashed #979797;
        }
        .item-tag {
          font-size: 6px;
          color: #252525;
          line-height: 26px;
          .bg {
            width: 8px;
            height: 4px;
            background: #252525;
            display: inline-block;
            vertical-align: middle;
          }
          .tag-rig {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
